<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
            /* 设置元素溢出的样式属性需要在父标签上面进行设置 */
            /* 默认是visible */
            /* overflow: visible; */
            /* hidden超出部分隐藏 */
            /* overflow: hidden; */
            /* 如果子标签的尺寸超过父标签的尺寸，会进行滚动显示，否则不会显示滚动条 */
            overflow: auto;
        }
        .box2 {
            width: 150px;
            height: 80px;
            background: green;
        }
    </style>
</head>
<body>
    <!-- 元素溢出只得就是子标签的尺寸，超出父标签的尺寸 -->
    <!-- div.box1>div.box2 创建父子div标签，父标签使用box1的类名，子标签使用box2的类名 -->
    <div class="box1">
        <div class="box2">hello world css</div>
    </div>
</body>
</html>